<template>
  <div id="app" class="container-fluid">
    <div class="col-lg-12 top-top">
      <div class="col-lg-4" @click="getJOSN('/api/movie/in_theaters')">正在热映</div>
      <div class="col-lg-4" @click="getJOSN('/api/movie/top250')">前二百五</div>
      <div class="col-lg-4" @click="getJOSN('/api/movie/coming_soon')">即将上映</div>
    </div>
    <div class=" middle">
      <div class="col-lg-4"  v-for="item in list" :key="item"><Box :msg="item" class="box col-lg-12"> </Box></div>
      <div v-if="list.length<1" class="welcome">欢迎光临！</div>
    </div>

  </div>

</template>

<script>
  import Box from '../components/box'

  export default {
    name: "home",
    components: {
      Box
    },
    props: {},
    data() {
      return {
        list: []
      }
    },
    methods: {
      getJOSN(path) {
        this.$axios.req(path).then(res => this.list = res.subjects)
      }
    },
    mounted() {

    },
    created() {

    },
    filters: {},
    computed: {},
    watch: {},
    directives: {}
  }
</script>

<style scoped lang="scss">
  .middle{
    .col-lg-4{
      height: 270px;
      position: relative;
      .box{
        position: absolute;
        height: 270px;
      }

    }
    .col-lg-4:hover .box{
      left: -1px;
      top:-1px;
      box-shadow: 1px 1px 1px 1px;
    }
  }
  .top-top {
    background-color: #0f0f0f;
    .col-lg-4 {
      text-align: center;
      color: #ffffff;
      margin: 10px 0;
      cursor: pointer;
    }
  }

  .welcome {
    font-size: 30px;
    text-align: center;
    margin-top: 40px;
  }
</style>